<template>
    <div>
        <!-- 商品图片轮播 -->
        <van-swipe class="my-swipe" :autoplay="3000">
            <van-swipe-item v-for="(img,i) in carouselList" :key="i">
                <van-image width="80%" :src="APIDomainName + img" />
            </van-swipe-item>
        </van-swipe>
        <!-- 商品 明细 -->
        <van-cell title="商品编号" :value="product.id" />
        <van-cell title="商品名称" :value="product.name" />
        <van-cell title="商品标题" :value="product.title" />
        <van-cell title="商品规格" :value="product.spec" />
        <van-cell title="硬盘" :value="product.disk" />
        <van-cell title="CPU" :value="product.cpu" />
        <van-cell title="内存" :value="product.memory" />
        <van-cell title="显卡" :value="product.video_card" />
        <van-cell title="分辨率" :value="product.resolution" />
        <van-cell title="上架时间" :value="shelfTime" />
        <van-cell title="单价" :value="product.price" />

        <!-- 商品购买区域 -->
        <van-cell>
            <template #default>
                <div class="count-buy">
                    <div>购买数量</div>
                    <van-stepper v-model="count" integer />
                    <van-button type="primary" size="small" @click="onClickAddShopcart">加入购物车</van-button>
                </div>
            </template>
        </van-cell>

        <!-- 商品评价区域 -->
        <van-cell title="商品评价">
            <template #label>
                <div v-if="reviews.length === 0">暂无评价</div>
                <div v-else>
                    <div v-for="(review, index) in reviews" :key="index">
                        <p>{{ review.user }}: {{ review.content }}</p>
                        <p>评价时间: {{ review.create_time }}</p>
                        <hr>
                    </div>
                </div>
            </template>
        </van-cell>

        <!-- 发表评价区域 -->
        <van-field
            v-model="newReview"
            type="textarea"
            rows="2"
            name="review"
            label="发表评价"
            placeholder="请输入评价内容..."
            maxlength="200"
            show-word-limit
        />
        <van-button
            type="primary"
            size="small"
            @click="submitReview"
        >
            提交评价
        </van-button>

        <van-button type="primary" size="large" @click="onBack">返回</van-button>
    </div>
</template>

<script>
// 根据id获取商品对象（详情）
import {
    getProductDetailByIdAPI
} from "@/api/product.js";

// 导入将商品添加购物车接口
import {
    addCartAPI
} from "@/api/cart.js";

import * as Tools from "@/utils/tools.js"
export default {
    // 数据
    data() {
        return {
            product: {}, // 商品对象（详情）				
            carouselList: [], // 商品轮播图片数组				
            count: 0, // 步进器绑定的数量
            reviews: [
                {
                    user: "张三",
                    content: "这个商品真的很不错，性能很稳定，值得购买！",
                    create_time: "2024年10月10日 10:00"
                },
                {
                    user: "李四",
                    content: "外观设计很时尚，使用起来也很方便，非常满意！",
                    create_time: "2024年10月11日 14:30"
                },
                {
                    user: "王五",
                    content: "发货速度很快，包装也很严实，赞一个！",
                    create_time: "2024年10月12日 09:15"
                }
            ], // 商品评价列表，增加了几条模拟评价信息
            newReview: '' // 新评价内容
        }
    },
    // 方法
    methods: {
        onBack() {
            this.$router.go(-1)
        },
        // 处理添加购物车			
        onClickAddShopcart() {
            let params = {
                product_id: this.product.id,
                count: this.count,
            };
            // 使用封装后的接口,注意：接口有参数
            addCartAPI(params).then(result => {
                this.$toast(result.msg);
            }).catch((err) => {
                console.log(err)
            });
        },
        // 提交评价
        submitReview() {
            if (this.newReview.trim()) {
                const newReviewObj = {
                    user: "匿名用户",
                    content: this.newReview,
                    create_time: new Date().toLocaleString()
                };
                this.reviews.push(newReviewObj);
                this.$toast('评价提交成功');
                this.newReview = ''; // 清空评价输入框
            }
        }
    },
    // 计算属性
    computed: {
        shelfTime() {
            let date = new Date(this.product.shelf_time);
            return Tools.dateFormat(date, "yyyy年MM月dd日");
        }
    },
    // 生命周期钩子-实例创建后,可以用this.*
    created() {
        let id = this.$route.params.id;
        // 使用封装后的接口
        getProductDetailByIdAPI(id).then(result => {
            console.log(result);
            this.product = result.data // 保存API调用的返回数据
            // 根据返回数据生成轮播图数组（用商品的中图片）
            this.product.picList.forEach(item => {
                this.carouselList.push(item.md);
            }); // 数据的遍历
        });
    },
}
</script>
<!-- 样式 -->
<style>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    /* background-color: #39a9ed; */
}

.count-buy {
    display: flex;
    flex-direction: row;
    margin: 10px 0px;
    justify-content: space-between;
}
</style>